<template>
  <!--display: flex;表示给父元素使用弹性布局
  效果:所有子元素横置,且父元素会根据子元素横置后的实际高度自动填充高度 -->
  <!-- 上方导航栏 -->
  <div class="navigate">
    <img src="imgs/logo.png" style="height: 256px;width: 256px;margin: 10px 10px" @click="router.push('/');">
    <el-button type="primary" round>
      <el-icon style="margin-right: 4px;" :size="20">
        <Check/>
      </el-icon>
      全部
    </el-button>
    <el-button type="primary" round>求助</el-button>
    <el-button type="primary" round>资源</el-button>
    <el-button type="primary" round>日常</el-button>
    <div class="right-aligned-group">
      <el-dropdown style="margin: 0 10px;">
    <span class="el-dropdown-link">
         <el-image
             :src="BASE_URL+user.imgUrl"
             fit="cover"
             style="width: 50px; height: 50px; border-radius: 50%;"
         >
    </el-image>
      <el-icon class="el-icon--right">
        <arrow-down/>
      </el-icon>
    </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="router.push('/user');">个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button type="primary" round style="margin: 0 10px" @click="router.push('/page');">发帖
        <el-icon style="margin: 1px 1px 4px 2px  ;" :size="15">
          <Plus/>
        </el-icon>
      </el-button>
        <el-button type="primary" round style="margin: 0 10px" @click="loadBlog">搜索
          <el-icon style="margin: 1px 1px 4px 2px  ;" :size="15">
            <Search/>
          </el-icon>
        </el-button>

      <el-input style="width: 300px;" placeholder="输入用户名或帖子标题">

      </el-input>
    </div>
  </div>
  <!--  下方主体内容-->
  <div style="padding:0;display: flex;height:90vh;overflow-y: auto;background-color: #e4e4e4;
    background-image: url(https://s1.hdslb.com/bfs/static/stone-free/dyn-home/assets/bg.png@1c.avif)">
    <div class="common-layout">
      <el-container>
        <el-header style="margin-top: 15px">
          <div class="header">
            <!-- 左侧按钮组 -->
            <div class="button-group-left">
              <el-button type="text">时间排序</el-button>
              <el-button type="text">评论最多</el-button>
            </div>
            <!-- 右侧按钮组 -->
            <div class="button-group-right">
              <el-button type="text">与我同校</el-button>
              <el-button type="text">与我同城</el-button>
            </div>
          </div>
        </el-header>
        <!--   帖子显示     -->
        <el-container>
          <el-main>
            <div class="main">
              <el-card class="card" v-for="item in blogArr" :key="item.id" style=" margin-bottom: 20px;">
                <template #header>
                  <div style="display: flex; align-items: center;">
                    <el-button type="text" @click="router.push('/blog/'+item.id)" style="padding-top: 10px">
                      {{ item.title }}
                    </el-button>
                  </div>
                </template>
                <!-- 如果有其他卡片内容，请继续在此处添加 -->
                <el-row :gutter="20">
                  <el-col :span="22">
                    <div class="text item" v-html="item.content"></div>
                  </el-col>
                  <el-col :span="1">
                    <IconGood @click="likes(item.id, item.beLikes)  " :class="{'active':item.beLikes}"/>
                  </el-col>
                  <el-col :span="1"><span style="line-height: 34px;">{{ item.likesCount }}</span></el-col>
                </el-row>
              </el-card>
            </div>
          </el-main>
          <el-aside>
            <div class="aside">
              <img src="imgs/w.jpg" alt="404" style="width: 200px;">
              <div style="padding: 5px;">
                <span style="color: #b5b5b5;">你说的对 但是《Linux》是由Linus自主研发的一款全新开放源代码操作系统内核。使用该内核的系统运行在一个被称作「ext4」的文件系统，在这里被Kernel选中的人将被授予「Terminal simulator」，引导Shell的力量。你将扮演一位名为「Root」的神秘用户，在自由的使用中邂逅不同开源协议、各有千秋独特的桌面环境和各种软件们，和它们一起服务器运维，找回丢失的软件包的同时，逐步发掘「/dev/null」的真相。</span>
              </div>
              <el-divider/>
            </div>
          </el-aside>
        </el-container>
      </el-container>
    </div>
  </div>


</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, formatter} from "element-plus";
import qs from "qs";
import router from "@/router";
import IconGood from "./IconGood.vue";

//定义数组保存帖子内容
const blogArr = ref({id: '', userId: '', username: '', title: '', content: '', imgUrl: '', type: '', createTime: ''});
//定义数组保存搜索框内容
const searchBlogForm = ref({
  username: '',
  title: ''
});
const user = ref(getUser());
// 定义方法显示帖子信息
const loadBlog = () => {
  searchBlogForm.value.likeUserId = user.value.id;
  let data = qs.stringify(searchBlogForm.value);
  axios.get(BASE_URL + '/v1/blog/select?' + data).then((response) => {
    if (response.data.code == 2000) {

      blogArr.value = response.data.data;
      console.log(response.data.data)
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};


const likes = (blogId, beLikes) => {
  let like = 0;
  if (beLikes === false) {
    like = 1;
  } else
    like = 0;
  axios.get(BASE_URL + `/v1/likes/insert/${blogId}/${user.value.id}/${like}`).then((response) => {

    if (response.data.code === 2000) {
      loadBlog();
    } else {
      ElMessage.error('点赞失败,请检查网络或联系管理员')
    }
  });
}


// 一进页面自动加载数据
onMounted(() => {
  loadBlog();
});
//退出登录功能
const logout = () => {
  if (confirm('您确认要退出吗?')) {
    //退出时清空localStorage中存的管理员信息与面包屑信息
    localStorage.removeItem('user');
    localStorage.removeItem('breadcrumb');
    //退出后去到登录页
    window.location.href = '/login';
    //也需要把已经取出来的值清空
    user.value = '';
  }
}
//处理弹窗关闭的方法
const handleClose = () => {
  dialogVisible.value = false;
}
</script>


<style scoped>
.navigate {
  display: flex;
  align-items: center;
  width: 100%;
  height: 8vh;
  background-color: #ffffff;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
  margin: auto;
}

.right-aligned-group {
  display: flex;
  align-items: center;
  width: 100%;
  height: 8vh;
  background-color: #ffffff;
  margin: auto;
  flex-direction: row-reverse;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}


.main {
  width: 1024px;
  background-color: #fff;
}

.header {
  width: 1024px;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-between; /* 分散对齐，使左右两组按钮分别靠边 */
  align-items: center; /* 垂直居中 */
}

.button-group-left,
.button-group-right {
  display: flex; /* 将每个按钮组设为Flex容器，以便内部按钮可以水平排列 */
  gap: 5px; /* 设置按钮间的间距 */
  padding-left: 10px;
  padding-right: 10px;
}

.aside {
  width: 200px;
  height: 600px;
  background-color: #fff;


}

.icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  cursor: pointer;

}

.active {
  fill: red;
}
</style>
